import React, { Component, useState, useEffect } from 'react'
import InfiniteScroll from 'react-infinite-scroll-component';
import VirtualList from 'rc-virtual-list';
import { Layout, Button, Form, Input, List, Skeleton, Divider, Avatar, message } from 'antd';
import PubSub from 'pubsub-js'
const { Header, Footer, Sider, Content } = Layout;
/*
    功能：主页面的右侧部分，显示公共聊天信息
*/
const fakeDataUrl =
    'https://randomuser.me/api/?results=20&inc=name,gender,email,nat,picture&noinfo';
const ContainerHeight = 700;

const P2PRoomPeoplesInfo = () => {
    const [data, setData] = useState([]);
    const appendData = () => {
        fetch(fakeDataUrl)
            .then(res => res.json())
            .then(body => {
                setData(data.concat(body.results));
                message.success(`${body.results.length} more items loaded!`);
            });
    };

    useEffect(() => {
        appendData();
    }, []);

    const onScroll = e => {
        if (e.target.scrollHeight - e.target.scrollTop === ContainerHeight) {
            appendData();
        }
    };

    return (
        <Sider style={{
            padding: 24,
            margin: 0,
            minHeight: 700,
            backgroundColor: 'yellow'
        }}>
            <List>
                <VirtualList
                    data={data}
                    height={ContainerHeight}
                    itemHeight={47}
                    itemKey="email"
                    onScroll={onScroll}
                >
                    {item => (
                        <List.Item key={item.email}>
                            <List.Item.Meta
                                avatar={<Avatar src={item.picture.large} />}
                                title={<a href="https://ant.design">{item.name.last}</a>}
                                description={item.email}
                            />
                            <div>Content</div>
                        </List.Item>
                    )}
                </VirtualList>
            </List>
        </Sider>
    );
};
export default P2PRoomPeoplesInfo
